<!--  -->
<template>
  <div class="domainBox">
    <div style="margin:24px 0;">
      <el-button size="small" type="primary" @click="addSSL">增&nbsp;加</el-button>
      <a :href="sslShopLink" target="_blank" v-if="!isAgent"  class="btn-org">购买SSL证书</a>
    </div>
    <el-table v-loading="loading" size="medium" :data="domainSSLData" border style="width: 100%">
      <el-table-column prop="domain.domainName" label="网站域名" :resizable="false">
      </el-table-column>
      <el-table-column label="强制HTTPS" prop="isShow" width="140" align="center">
        <template slot-scope="scope">
          <el-switch v-model="isShow[scope.row.hssl.domainId]" active-color="#13ce66"
            @change="changeShow(scope.row.hssl.domainId, isShow[scope.row.hssl.domainId])">
          </el-switch>
          <span class="nott">{{isShow[scope.row.hssl.domainId]? '开启' : '关闭'}}</span>
          <el-tooltip class="qstip" effect="dark" content="启用后访问域名将强制访问HTTPS安全链接" placement="right">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column width="250" header-align="center" align="center" fixed="right" label="操作" :resizable="false">
        <template slot-scope="scope">
          <el-button @click="edititem(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteitem(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Addssl ref="add" :resetData="resetData" :domainSSLData="domainSSLData"/>
  </div>
</template>

<script>
import Addssl from '@/components/main/user/host/domain/ssl/Addssl.vue'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
import * as functions from '@/core/functions.js'
export default {
  created () {
    this.resetData()
    PubSub.subscribe(PubsubType.PUBSUB_DELETE_DOMAIN_PUSH, () => {
      this.resetData()
    })
    // 是否代理商
    functions.agentInfo().then(agent => {
      if (parseInt(agent.loginAgentDomain) === 1) {
        this.isAgent = true
      } else {
        this.isAgent = false
      }
    })
  },
  data () {
    return {
      formInline: {
        domain: ''
      },
      domainSSLData: [],
      loading: false,
      isShow: {},
      // 购买跳转
      sslShopLink: 'https://www.35.cn/web/ssl/',
      isAgent: true
    }
  },
  watch: {
    domainSSLData: {
      handler (newValue) {
        if (newValue.length > 0) {
          newValue.forEach(item => {
            this.isShow[item.hssl.domainId] = item.hssl.httpsOnly > 0
          })
        } else {
          this.isShow = {}
        }
      },
      deep: true
    }
  },
  methods: {
    resetData () {
      this.loading = true
      this.$post('/domain/infos-ssl').then(response => {
        if (response) {
          this.domainSSLData = response
        } else {
          this.domainSSLData = []
        }
        this.loading = false
      })
    },
    addSSL () {
      this.$refs['add'].show({domainId: 0})
    },
    changeShow (id, httpsOnly) {
      let param = {
        domainId: id,
        httpsOnly: httpsOnly ? 1 : 0
      }
      // 请求后台修改状态
      this.$post('/domain/update-https-only', param).then(response => {
        if (response) {
          let show = this.isShow
          show[response.hssl.domainId] = response.hssl.httpsOnly > 0
          this.isShow = JSON.parse(JSON.stringify(show))
        }
      })
    },
    edititem (data) {
      this.$refs['add'].show({domainId: data.domain.id})
    },
    deleteitem (data) {
      this.$confirm('确定要删除 ' + data.domain.domainName + ' 的SSL证书绑定', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$post('/domain/delete-ssl', { sslId: data.hssl.id }).then(response => {
          if (response) {
            this.resetData()
          }
        })
      }).catch(() => {
      })
    }
  },
  components: {
    Addssl
  }
}

// function initData (response) {
//   return response.from.map(element => {
//     let item = response.to.find(ele => {
//       return parseInt(ele.id) === parseInt(element.redirect)
//     })
//     if (item) {
//       return {
//         id: element.id,
//         fromDomain: element.domainName,
//         toDomain: item.domainName
//       }
//     }
//   })
// }

</script>
<style scoped lang="scss">
.domainBox /deep/ .el-table th {
  background: #EFF1F8;
  color: #555;
  border-color: #fff;
}
.domainBox /deep/ .el-table__fixed-right{
  height: 100% !important;
}
.nott{
  font-size: 12px;
}
.qstip {
  color: #bbb;
}
.btn-org{
  padding: 9px 20px;
  background: #E6A23C;
  font-size: 12px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  margin-left:10px;
  &:hover{
    opacity: 0.8;
  }
}
</style>
